<template>
  <div class="w-1/1 h-1/1 bg-[var(--el-bg-color)] rounded-[15px]">
    <div class="p-[20px]">
      <p class="font-bold">网页链接</p>
    </div>
    <div v-for="(p, index) in routesList" :key="index" class="px-[20px] py-[10px] border-b-[1px] border-solid border-[#e0e0e0]">
      <div>
        <p class="text-[var(--el-color-primary)]">{{ p.name }}</p>
        <div class="text-[14px] mt-[5px]">
          <span class="mr-[10px]">网站地址:</span>
          <span>{{ p.path }}</span>
        </div>
        <div class="text-[14px] mt-[5px]">
          <span class="mr-[10px]">小程序地址:</span>
          <span>{{ p.app_path }}</span>
        </div>
        <div class="text-[14px] my-[8px]" v-show="p.params_description">
          <span class="mr-[10px]">参数:</span>
          <span>{{ p.params_description }}</span>
        </div>
        <div class="text-[14px]" v-show="p.example">
          <span class="mr-[10px]">例如:</span>
          <span>{{ p.example }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRoutes } from "@/api/modules/shop";
import { onBeforeMount, ref } from "vue";
const routesList = ref<Route[]>([]);

interface Route {
  name: string;
  id?: number;
  params_description: string;
  app_path: string;
  path: string;
  example: string;
}

const list = async () => {
  const { data } = await getRoutes({ pageNum: 1, pageSize: 9999 });
  routesList.value = data as any;
};

onBeforeMount(() => {
  Promise.all([list()]);
});
</script>

<style></style>
